<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="riverInfoForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-12 b-r">
              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">河道编号：</label>
                <div class="col-sm-12 ">
                  <input id="bean-code" name="code" v-model="item.code" class="form-control" type="text"
                      placeholder="请输入河道编号" required="" aria-required="true" aria-describedby="bean-code-error"
                      maxlength="55" aria-invalid="true" autocomplete="off">
                  <span id="bean-code-error" class="help-block m-b-none" for="bean-code"></span>
                </div>
              </div>

              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">河道名称：</label>
                <div class="col-sm-12 ">
                  <input id="bean-name" name="name" v-model="item.name" class="form-control" type="text"
                      placeholder="请输入河道名称" required="" aria-required="true" aria-describedby="bean-name-error"
                      maxlength="55" aria-invalid="true" autocomplete="off">
                  <span id="bean-name-error" class="help-block m-b-none" for="bean-name"></span>
                </div>
              </div>
              <div class="col-sm-12 clearfix">
                <vue-area areaId="areaIds"
                    areaName="areaNames"
                    :areaIdVal="item.areaIds||staff.dto().areaId"
                    :areaNameVal="item.areaNames||staff.dto().areaName"
                    :areaFixed="item.areaIds||staff.dto().areaId"
                    :selectBy="item.areaIds||staff.dto().areaId"
                    areaRequired="true,true,true,false,false">
                </vue-area>
              </div>
              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">上级河道：</label>
                <div class="col-sm-12 ">
                  <select data-placeholder="选择上级河道" id="bean-parentId" name="parentId" class="form-control"
                      aria-describedby="bean-parentId-error" aria-invalid="true">
                    <option value="">--请选择上级河道--</option>
                    <option v-if="parents != null && parents.length > 0"
                        v-for="(parent, index) in parents" :value="parent.id"
                        :selected="parent.id == item.parentId">{{ parent.name }}
                    </option>
                  </select>
                  <span id="bean-parentId-error" class="help-block m-b-none" for="bean-parentId"></span>
                </div>
              </div>


              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">水域类型：</label>
                <div class="col-sm-12 ">
                  <select data-placeholder="选择水域类型" id="bean-type" name="type" class="form-control" required=""
                      aria-required="true" aria-describedby="bean-type-error" aria-invalid="true">
                    <option value="">--请选择水域类型--</option>
                    <option value="1" :selected="item.type == 1">河流</option>
                    <option value="2" :selected="item.type == 2">水库</option>
                    <option value="3" :selected="item.type == 3">渠道</option>
                  </select>
                  <span id="bean-type-error" class="help-block m-b-none" for="bean-type"></span>
                </div>
              </div>

              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">河道起点：</label>
                <div class="col-sm-12 ">
                  <input id="bean-startAddr" name="startAddr" v-model="item.startAddr" class="form-control" type="text"
                      placeholder="请输入河道起点" required="" aria-required="true" aria-describedby="bean-startAddr-error"
                      maxlength="128" aria-invalid="true" autocomplete="off">
                  <span id="bean-startAddr-error" class="help-block m-b-none" for="bean-startAddr"></span>
                </div>
              </div>

              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">河道终点：</label>
                <div class="col-sm-12 ">
                  <input id="bean-endAddr" name="endAddr" v-model="item.endAddr" class="form-control" type="text"
                      placeholder="请输入河道终点" required="" aria-required="true" aria-describedby="bean-endAddr-error"
                      maxlength="128" aria-invalid="true" autocomplete="off">
                  <span id="bean-endAddr-error" class="help-block m-b-none" for="bean-endAddr"></span>
                </div>
              </div>
              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">河面长度（km）：</label>
                <div class="col-sm-12 ">
                  <input id="bean-lengths" name="lengths" v-model="item.lengths" class="form-control" type="text"
                      placeholder="请输入河流长度（km）" required="" aria-required="true"
                      aria-describedby="bean-lengths-error" aria-invalid="true" autocomplete="off">
                  <span id="bean-lengths-error" class="help-block m-b-none" for="bean-lengths"></span>
                </div>
              </div>

              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">河面宽度（m）：</label>
                <div class="col-sm-12 ">
                  <input id="bean-width" name="width" v-model="item.width" class="form-control" type="text"
                      placeholder="请输入河流宽度（m）" required="" aria-required="true" aria-describedby="bean-width-error"
                      aria-invalid="true" autocomplete="off">
                  <span id="bean-width-error" class="help-block m-b-none" for="bean-width"></span>
                </div>
              </div>


              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">备注：</label>
                <div class="col-sm-12 ">
                  <textarea class="form-control" v-model="item.memo" rows="4" placeholder="请输入备注"></textarea>
                  <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                </div>
              </div>
              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">河长：</label>
                <div class="col-sm-12 ">
                  <select data-placeholder="选择河长" id="bean-principalId" name="principalId"
                      class="form-control chosen-select"
                      aria-describedby="bean-principalId-error" aria-invalid="true" required="" multiple
                      style="padding-top: 3px;border-radius: 2px;">
                    <option value="">--请选择河长--</option>
                    <option v-if="staffs != null && staffs.length > 0"
                        v-for="(staff, index) in staffs" :value="staff.id"
                        :selected="isSelectPrincipal(item.principalId,staff.id)">
                      {{ staff.name }}
                    </option>
                  </select>
                  <input type="hidden" name="principalName" id="bean-principalName" v-model="item.principalName"/>
                  <span id="bean-principalId-error" class="help-block m-b-none" for="bean-principalId"></span>
                </div>
              </div>
              <div class="form-group col-sm-6 clearfix">
                <label class="col-sm-8 control-label">水域面积（万方）：</label>
                <div class="col-sm-12 ">
                  <input id="bean-acreage" name="acreage" v-model="item.acreage" class="form-control" type="text"
                      placeholder="请输入水域面积（万方）" required="" aria-required="true"
                      aria-describedby="bean-acreage-error" aria-invalid="true" autocomplete="off">
                  <span id="bean-acreage-error" class="help-block m-b-none" for="bean-acreage"></span>
                </div>
              </div>
              <div class="form-group col-sm-6 clearfix">
                <label class="col-md-8 control-label">上传图片：</label>
                <div class="col-md-12 ">
                  <input id="bean-imgName" name="imgName" v-model="item.imgName" class="form-control" type="text"
                      readonly
                      required="" aria-required="true" aria-describedby="bean-imgName-error" maxlength="55"
                      aria-invalid="true">
                  <a href="javascript:;" id="upload_btn_path"
                      class="btn btn-success btn-sm"><i class="fa fa-upload fa-coordinate"></i> 点击上传</a>
                  <div id="upload_div_path" style="">
                    <div class="img-grid-2">
                      <input name="imgPath" id="imgPath" v-model="item.imgPath" type="hidden">
                    </div>
                  </div>
                  <span id="bean-imgName-error" class="help-block m-b-none" for="bean-imgName"></span>
                </div>
              </div>
            </div>


            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
import vueArea from '@/components/vue-area'
import '@/assets/css/upload.css'
import '@/assets/js/upload_single_file.js'
import '#/chosen/chosen.css'
import '#/chosen/chosen.jquery.js'

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      item: {},
      parents: [],
      staffs: [],
      newFlag: 0,
      uuidToken: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#riverInfoForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.riverInfo.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.riverInfo.info)) {
        that.info();
      }
    });
    if (!that.item.areaIds || that.item.areaIds == null) {
      that.item.areaIds = '51,5110,511025,,'; // 默认选择省市县区域
    }
    that.staffList();
    // 监听河长值改变事件
    $('#bean-principalId').change(function () {
      var text = '';
      $(this).find('option:selected').each(function () {
        text += text === '' ? $.trim($(this).text()) : ',' + $.trim($(this).text());
      });
      $('#bean-principalName').val(text);
      that.item.principalName = text;
    });
    // 上传图片
    window.upload_single_file('upload_btn_path', 'upload_div_path', 'png,jpg,gif,bmp', 'imgPath', function (data) {
      $('#bean-imgName').val(data.name);
      $('#imgPath').val(data.url);
      that.item.imgName = data.name;
      that.item.imgPath = data.url;
    });

    $('#bean-area4,#bean-area5').change(function () {
      that.list($(this).val());
    });
    that.initSelect();
  },
  methods: {
    initSelect: function () {
      var config = {
        '.chosen-select': {},
        '.chosen-select-deselect': {allow_single_deselect: true},
        '.chosen-select-no-single': {disable_search_threshold: 10},
        '.chosen-select-no-results': {no_results_text: 'Oops, nothing found!'},
        '.chosen-select-rtl': {rtl: true},
        '.chosen-select-width': {width: '95%'}
      }
      for (var selector in config) {
        $(selector).chosen(config[selector]);
      }
    },
    info() {
      let that = this;
      axios.get(site.riverInfo.info + sessionStorage.getItem(site.riverInfo.info), {}).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          that.item = result.data;
          that.list(that.item.currAreaId);
        } else {
          alert(result.message);
        }
      });
    },
    staffList() {
      let that = this;
      axios.get(site.riverSupervisor.list, {}).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          that.staffs = result.data;
          setTimeout(function () {
            $('.chosen-select').trigger('chosen:updated');
          }, 300);
        } else {
          alert(result.message);
        }
      });
    },
    list(currAreaId) {
      let that = this;
      let params = '?levelFlag=1&currAreaId=' + currAreaId;
      axios.get(site.riverInfo.list + params, {}).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          that.parents = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#riverInfoForm').valid()) {
        axios.post(site.riverInfo.save, $('#riverInfoForm').serialize()
            , axiosContentType.xWwwFormUrlencoded).then(function (response) {
          var result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    },
    isSelectPrincipal(principalId, staffId) {
      if (apiUtil.notEmpty(principalId)) {
        return principalId.split(',').indexOf(staffId) !== -1;
      }
      return false;
    }
  }
}
</script>

